Cara Membuat Artikel Terkait di Bawah Postingan Blogspot (part 2)

Menampilkan artikel-artikel terkait di bawah postingan kita tujuannya adalah supaya para pengunjung dapat membaca content yang ada dalam blog kita, sehingga dengan demikian para pengunjung akan menjadi betah berlama-lama di blog  kita.
Ikuti saja cara nya berikut ini :

1. Login ke Blogger
2. klik Tata Letak dan pilih Edit HTML
3. Kalau sudah, klik Expand Template Widget
4. Lalu cari kode berikut (Ctrl + F) : ]]></b:skin>
5. Kemudian copy paste kode dibawah ini persis berada diatas kode ]]></b:skin>

/* Kode CSS untuk Artikel Terkait */
#underpost{
font-family:Arial, Tahoma, Verdana, Sans-serif;/* Jenis font. */
font-size:small;/* Ukuran font. */
color:#0080FF;/* Warna teks. */
background:#81BEF7;/* Warna latar belakang. */
clear:both;
float:left;
width:410px;/* Lebar area artikel terkait. Sesuaikan dengan lebar main-wrapper (kolom posting) anda. */
-moz-border-radius:10px;
border:0;
height:auto;
margin:0 auto;
padding:10px;
}
#underpost h2{
font-family:'Trebuchet MS',Trebuchet,Arial,Verdana,Sans-serif;/* Jenis font heading. */
font-size:large;/* Ukuran font heading. */
color:#0080FF;/* Warna teks heading. */
margin-bottom:5px;
border-bottom:1px solid #0080FF;/* Warna garis pembatas dibawah teks heading. */
padding:0 0 5px;
}
#underpost a,#underpost a:link,#underpost a:active,#underpost a:visited{
color:#0B243B;/* Warna link */
text-decoration:none;
}
#underpost a:hover{
text-decoration:underline;
}
#artikel-terkait{
overflow:auto;
width:auto;
height:400px;/* Tinggi dari artikel terkait */
padding:10px;
}

Keterangan :
Sebelum membuatnya sobat bisa edit-edit dulu lebar dari kolom artikel terkait tsb. dan sobat juga bisa ubah warna backgroundnya sesuai selera sobat. pada script diatas kiranya sudah cukup jelas. 

6. Lalu cari kode ini lagi <p><data:post.body/></p>

7. Kemudian kopy paste-kan kode dibawah ini tepat di bawah kode <p><data:post.body/></p>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='underpost'>
<div class='similiar'>

<div class='widget-content'>
<h2><blink>Artikel Terkait Lainnya Seputar:</blink></h2>
<div id='artikel-terkait'>
<div id='relposts'/><br/><br/>
<script type='text/javascript'>

var homeUrl3 = &quot;<data:blog.homepageUrl/>&quot;;
var maxNumberOfPostsPerLabel = 4;
var maxNumberOfLabels = 10;

maxNumberOfPostsPerLabel = 100;
maxNumberOfLabels = 3;

function listEntries10(json) {
var ul = document.createElement(&#39;ul&#39;);
var maxPosts = (json.feed.entry.length &lt;= maxNumberOfPostsPerLabel) ?
json.feed.entry.length : maxNumberOfPostsPerLabel;
for (var i = 0; i &lt; maxPosts; i++) {
var entry = json.feed.entry[i];
var alturl;

for (var k = 0; k &lt; entry.link.length; k++) {
if (entry.link[k].rel == &#39;alternate&#39;) {
alturl = entry.link[k].href;
break;
}
}
var li = document.createElement(&#39;li&#39;);
var a = document.createElement(&#39;a&#39;);
a.href = alturl;

if(a.href!=location.href) {
var txt = document.createTextNode(entry.title.$t);
a.appendChild(txt);
li.appendChild(a);
ul.appendChild(li);
}
}
for (var l = 0; l &lt; json.feed.link.length; l++) {
if (json.feed.link[l].rel == &#39;alternate&#39;) {
var raw = json.feed.link[l].href;
var label = raw.substr(homeUrl3.length+13);
var k;
for (k=0; k&lt;20; k++) label = label.replace(&quot;%20&quot;, &quot; &quot;);
var txt = document.createTextNode(label);
var h = document.createElement(&#39;b&#39;);
h.appendChild(txt);
var div1 = document.createElement(&#39;div&#39;);
div1.appendChild(h);
div1.appendChild(ul);
document.getElementById(&#39;relposts&#39;).appendChild(div1);
}
}
}
function search10(query, label) {

var script = document.createElement(&#39;script&#39;);
script.setAttribute(&#39;src&#39;, query + &#39;feeds/posts/default/-/&#39;
+ label +
&#39;?alt=json-in-script&amp;callback=listEntries10&#39;);
script.setAttribute(&#39;type&#39;, &#39;text/javascript&#39;);
document.documentElement.firstChild.appendChild(script);
}

var labelArray = new Array();
var numLabel = 0;

<b:loop values='data:posts' var='post'>
<b:loop values='data:post.labels' var='label'>
textLabel = &quot;<data:label.name/>&quot;;

var test = 0;
for (var i = 0; i &lt; labelArray.length; i++)
if (labelArray[i] == textLabel) test = 1;
if (test == 0) {
labelArray.push(textLabel);
var maxLabels = (labelArray.length &lt;= maxNumberOfLabels) ?
labelArray.length : maxNumberOfLabels;
if (numLabel &lt; maxLabels) {
search10(homeUrl3, textLabel);
numLabel++;
}
}
</b:loop>
</b:loop>
</script>
</div>
</div>

</div>
</div>
</b:if>

8. Bila sudah klik Simpan.. sekarang lihat hasilnya...

SEMOGA BERMANFAAT